<template>
  <view class="content">
    <u-notice-bar mode="horizontal" :list="noticeList" />
    <Banner />
    <Tabs ref="Tabs" />
    <ListItemDom :list="homeList" />
    <u-back-top :scrollTop="scrollTop" mode="square" :icon-style="iconStyle" />
    <TabBar />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import TabBar from "@/components/TabBar";
import ListItemDom from "./components/homeList.vue";
import Tabs from "./components/tabs.vue";
import Banner from "./components/banner.vue";
export default {
  onLoad() {
    this.init();
  },
  onHide() {
    this.$refs.Tabs.enable = false;
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.Tabs.enable = true;
    });
  },
  components: {
    TabBar,
    ListItemDom,
    Tabs,
    Banner,
  },
  data() {
    return {
      page: 1,
      scrollTop: 0,
      iconStyle: {
        fontSize: "32rpx",
        color: "#2979ff",
      },
    };
  },
  watch: {
    tabObj: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  // 上下滚动事件
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  computed: {
    ...mapState("home", ["homeList", "noticeList", "tabObj"]),
  },
  // 触底事件
  onReachBottom() {
    this.push_homelist_action({
      page: ++this.page,
      limit: 20,
      tab: this.tabObj.value,
    });
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.init();
  },
  methods: {
    ...mapActions("home", ["homelist_action", "push_homelist_action"]),
    init() {
      this.page = 1;
      this.homelist_action({
        page: this.page,
        limit: 20,
        tab: this.tabObj.value,
      }).then(() => {
        uni.stopPullDownRefresh();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
